<template>
   <div class="carouselMap" @mouseover="button_t" @mouseout="button_f" v-if="skeleton">
       <span class="left" @click="  carouselMap_right" >
           <img src="/img/common/jiantou_right.png" alt="" >
       </span>

      <ul class="image">
           <li> <img :src='disList[index]'  alt=""
                     class="animations"
                     :class="{'animations':true,'blo_a':anim,'dis_a':!anim}"></li>
      </ul>

       <span class="right"   @click=" carouselMap_left">
           <img src="/img/common/jiantou_left.png" alt="">
       </span>
       <ul class="navigation" >
           <li class="navigation_li"></li>
           <li class="navigation_li"></li>
           <li class="navigation_li"></li>
       </ul>
   </div>
   <div v-else class="circle" >
           <div class="circle_box">
               <CircleLoading :outer="'5rem'" :inner="'3rem'"></CircleLoading>
           </div>
   </div>
</template>

<script>

import api from "@/api";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";

export default {
    name: "CarouselMap",
    components: {CircleLoading},
    props:['carouselMap'],
    data(){
        return{
            disList:["","",""],
            index:0,
            but:"",
            display:"",
            timer:"",
            anim:true,
            skeleton:false,
        }
    },
    mounted() {
        api.getAdminWeb().then((res)=>{
                for(let i=0;res.data.data.length;i++){
                    if(res.data.data[i].options === "home_carousel"){
                        this.disList = res.data.data[i].content.split(',');
                    }else {
                        return
                    }
                }

        })
        this.setTimer();

    },
    watch:{
        carouselMap(newValue,oldValue){
           if(newValue !== ""){
               setTimeout(()=>{
                   this.skeleton = true;
               },100)
           }
        }
    },
    methods:{
        carouselMap_left(){
            if(this.index<this.disList.length-1){
                this.index+=1;
            }
            else  this.index=0;
           this.anim = false
            setTimeout(()=>{
                this.anim = true
            })
           this.move(this.index)
        },
        carouselMap_right(){
            if(this.index>0)
               this.index-=1;
            else  this.index=this.disList.length-1;
            this.anim = false
            setTimeout(()=>{
                this.anim = true
            })
            this.move(this.index)
        },
        button_t(){
           this.but="0.5vw";
           this.clearInv();
            },
        clearInv() {
            clearInterval(this.timer);
        },
        button_f(){
            this.but="-2vw";
            this.setTimer();
        },
        setTimer(){
            this.timer = setInterval(this.carouselMap_left,4000);
        },
        move(index){
            let t = document.querySelector(".navigation")
            let li =  document.querySelectorAll(".navigation_li");
            if(li.length>0){
                for(let i =0 ;i<li.length;i++){
                    li[i].style.background = "#ffffff";
                    li[i].style.boxShadow= "";
                }
                li[index].style.background = "#8f8c8c";
                li[index].style.boxShadow= "0 0 10px 2px #eae3e3";
            }else {
                this.clearInv();
            }
        }
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); //关闭
        }
    }
}
</script>

<style scoped>
.circle{
    height: 40vh;
    background: rgba(246, 247, 248, 0.7);
}
.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f6f7f8;
}
 .carouselMap{
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 1s;
     min-width: 400px;

 }
.animations{
    min-width: 400px;
    animation: dis_a .5s ease-in-out 0s 1 forwards;
}
 .carouselMap img{
     width: 100%;
     height: 40vh;
     border-radius: 5px;
 }

 .left img, .right img{
     width: 32px !important;
     height: 24px !important;
 }
.image{
    list-style: none;
    transition: all .3s;
    border-radius: 5px;
}
 .left,.right{
     display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     margin-top: -25px;
     width: 30px;
     height: 40px;
     align-items: center;
     background: rgba(84, 78, 78, 0.8);
     z-index: 88;
     transition: all 1s;
 }
 .left{
     border-top-right-radius: 100%;
     border-bottom-right-radius: 100%;
 }
 .right{
     right: 0;
     border-top-left-radius: 100%;
     border-bottom-left-radius: 100%;

 }
 .carouselMap:hover span{
     display: flex !important;
     animation:gradient .3s ease-in-out 0s 1 forwards ;
 }
 span:hover{
     cursor: pointer;
 }
 @keyframes gradient {
      0%{
         transform: scale(0);
      }
     100%{
         transform: scale(1);
     }
 }

 .navigation{
     display: flex;
     justify-content: center;
     align-items: center;
     list-style: none;
     position: absolute;
     bottom: 10%;
     left: 50%;
     transform: translateX(-50%);
 }
 .navigation li{
     width: 0.8vw;
     height: 1.6vh;
     min-height: 12px;
     min-width: 12px;
     border-radius: 50%;
     background: #ffffff;
     margin-left: 10px;
     transition: all .4s;
     opacity: .9;

 }
 .navigation li:first-child{
     margin-left: 0;
     background: #484343;
     box-shadow: 0 0 10px 2px #eae3e3;
 }
 .dis_a{
   animation: dis_a .5s ease-in-out 0s 1 forwards;
}
 .blo_a{
     animation: blo_a .5s ease-in-out 0s 1 forwards;
 }

 @keyframes dis_a {
   0%{
    opacity: 1;
   }
   100%{
       opacity: 0;
   }
 }
 @keyframes blo_a {
     0%{
         opacity: 0;
     }
     100%{
         opacity: 1;
     }
 }




 @media (min-width:600px) and (max-width: 900px) {
     .carouselMap img{
         width: 100%;
         height: 50vh;
       }
     .carouselMap{
         min-width: 400px;
         width: 100%;

     }
     .animations{
         min-width: 400px;
         width: 100%;
     }
     }


 @media (min-width:0px) and (max-width: 600px) {
     .carouselMap img{
         width: 100%;
         height: 30vh;
     }
     .carouselMap{
         min-width: 360px !important;
         width: 100%;
     }
     .animations{
         width: 100%;
         min-width: 360px !important;
     }
 }
</style>